﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
      <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>猫咖控制台</title>
    <!-- Bootstrap Styles-->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet" />
    <!-- FontAwesome Styles-->
    <link href="/static/css/font-awesome.css" rel="stylesheet" />
    <!-- Morris Chart Styles-->
    <link href="/static/js/morris/morris-0.4.3.min.css" rel="stylesheet" />
    <!-- Custom Styles-->
    <link href="/static/css/custom-styles.css" rel="stylesheet" />
     <!-- Google Fonts-->
   <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
    <!--         vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
    <!--         axios-->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="wrapper">
        <nav class="navbar navbar-default top-navbar" role="navigation">
            <div th:insert="~{common/common::admin-top}"></div>
        </nav>
        <!--/. NAV TOP  -->
        <nav class="navbar-default navbar-side" role="navigation">
            <div th:insert="~{common/common::admin-left}"></div>
        </nav>
        <!-- /. NAV SIDE  -->
        <div id="page-wrapper" >
            <div id="page-inner">
			 <div class="row">
                    <div class="col-md-12">
                        <h1 class="page-header">
                            宠物管理 <small> Pet Manager</small>
                        </h1>
                    </div>
                </div> 

                <div class="row">
                    <div class="col-md-6">
                      <!--   Kitchen Sink -->
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                出售宠物
<!--                                <input type="text" placeholder="输入宠物猫编号"/><button>搜索</button>-->
                            </div>
                            <div class="panel-body">
                                <div class="table-responsive">
                                    <table class="table table-striped table-bordered table-hover">
                                        <thead>
                                            <tr>
                                                <th>宠物编号</th>
                                                <th>宠物名</th>
                                                <th>年龄</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-for="item in allSellPet">
                                                <td>{{item.petId}}</td>
                                                <td>{{item.petName}}</td>
                                                <td>{{item.petPrice}}</td>
                                                <td>
                                                    <button @click="lookDetail(item.petId)">详情</button>
                                                    <button @click="delPet(item.petId)">下架</button>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                         <!-- End  Kitchen Sink -->
                    </div>
                    <div class="col-md-6">
                         <!--   Basic Table  -->
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                寄养宠物
<!--                                <input type="text" placeholder="输入宠物猫编号"/><button>搜索</button>-->
                            </div>
                            <div class="panel-body">
                                <div class="table-responsive">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th>宠物编号</th>
                                                <th>宠物名</th>
                                                <th>状态</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-for="item in allUploadPet">
                                                <td>{{item.petId}}</td>
                                                <td>{{item.petName}}</td>
                                                <td>
                                                    <input type="text" v-model="item.petState">
                                                </td>
                                                <td>
                                                    <button @click="lookDetail(item.petId)">详情</button>
                                                    <button @click="changePetState(item)">编辑</button>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                          <!-- End  Basic Table  -->
                    </div>
                </div>

                 <!-- /. ROW  -->
				 <footer><p>@ 猫咖管理控制台</p></footer>
				</div>
             <!-- /. PAGE INNER  -->
            </div>
         <!-- /. PAGE WRAPPER  -->
        </div>
    <!-- /. WRAPPER  -->
    <!-- JS Scripts-->
    <!-- jQuery Js -->
    <script src="/static/js/jquery-1.10.2.js"></script>
    <!-- Bootstrap Js -->
    <script src="/static/js/bootstrap.min.js"></script>
    <!-- Metis Menu Js -->
    <script src="/static/js/jquery.metisMenu.js"></script>
    <!-- Morris Chart Js -->
    <script src="/static/js/morris/raphael-2.1.0.min.js"></script>
    <script src="/static/js/morris/morris.js"></script>
    <!-- Custom Js -->
    <script src="/static/js/custom-scripts.js"></script>

    <script>
        let vm = new Vue({
            el:'#wrapper',
            data:{
                allSellPet:[],
                allUploadPet:[],
            },
            methods:{
                lookDetail(petId){
                    console.log(petId)
                    location.href = '/pet/lookDetail/'+petId
                },
                delPet(petId){
                    let that = this
                    axios.delete('/pet/delPet/'+petId).then(res=>{
                        if (res.data){
                            alert('下架宠物成功')
                            axios.get('/pet/allSellPet').then(res=>{
                                that.allSellPet = res.data
                            })
                        }
                    })
                },
                changePetState(pet){
                    console.log(pet)
                    let fromData = new FormData();
                    fromData.append('petState',pet.petState)
                    fromData.append('petId',pet.petId)
                    axios.put('/pet/changePetInfo',fromData).then(res=>{
                        if (res.data){
                            alert('修改成功')
                        }
                    })
                }
            },
            mounted(){
                console.log('mounted')
                let that = this
                //所有出售宠物
                axios.get('/pet/allSellPet').then(res=>{
                    that.allSellPet = res.data
                })
                //所有寄售宠物
                axios.get('/pet/allUploadPet').then(res=>{
                    that.allUploadPet = res.data
                })
            }
        })
    </script>
    
   
</body>
</html>
